<template>
  <div>
    <div class="header">
      <!-- Navigator Mini Bar -->
      <wxc-minibar :title="language.title"
                    background-color="#fcfcfc">
        <div slot="left">
          <i class="iconfont icon-back"></i>
        </div>
      </wxc-minibar>
    </div>
    <div class="content" :style="{height:tabPageHeight}" v-if="foodList != ''">
      <list class="list-box" :style="{height:tabPageHeight}">
        <cell class="item-box">
          <cell class="top">
            <div class="slot-left">
              <i class="iconfont icon-table"></i>
              <text>{{language.table}}{{tableId}}</text>
            </div>
          </cell>
          <cell class="middle">
            <div v-for="(v, index) in foodList" :key="index" class="food">
              <div class="item">
                <div class="name">
                  <text>{{v.title}}</text>
                </div>
                <text class="number">{{v.number}}</text>
                <text class="price">{{v.price}}</text>
              </div>
              <text class="attributes">{{v.attributeTitle}}</text>
            </div>
          </cell>
        </cell>
      </list>
    </div>
    <order-footer v-if="foodList != ''" :totalPrice="totalPrice"></order-footer>
  </div>
</template>

<style lang="scss" scoped>
  .header{
    position: fixed;
    top:0px;
    z-index:99999;
  }
  .content {
    padding: 30px;
    margin-top:60px;
    .list-box {
      box-shadow: 5px 10px 10px rgba(204,204,204,0.3);
      border-radius: 20px;
      margin-top:6px;
      .item-box {
        background-color: #ffffff;

        .top {
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          padding: 20px;

          .slot-left {
            flex-direction: row;
            align-items: center;

            .icon-table {
              margin-right: 20px;
              font-size: 120%;
            }
          }
        }

        .middle {
          .food {
            padding: 40px 20px;
            margin-top: 20px;
            border-top: 1px dashed #dfdfdf;

            .item {
              flex-direction: row;
              justify-content: space-around;
              align-items: flex-end;

              .name {
                flex-grow: 1;

                > p {
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  display: block;
                  width: 400px;
                }
              }

              .number {
                flex-direction: row;
                flex-grow: 1;

                &:before {
                  content: "x"
                }
              }

              .price {
                flex-direction: row;

                &:before {
                  content: "mop";
                  padding-right: 5px;
                }
              }
            }
          }

          .attributes {
            margin-top: 20px;
            color: #979797;
            font-size: 26px;
          }
        }
      }
    }
  }
</style>

<script>
import { getOrderDetail } from '@/api/order'
import { WxcMinibar ,Utils } from 'weex-ui'
import OrderFooter from '@/components/layouts/orderFooter'
import { i18n } from '@/renderer/modules/lang'
export default {
  components: { WxcMinibar, OrderFooter },
  data: () => ({
    orderId: localStorage.getItem('order_id'),
    tableId: localStorage.getItem('table_id') ? localStorage.getItem('table_id') : '1',
    foodList: [],
    totalPrice: '0.00',
    language: {
      title: i18n.t('myorder.title'),
      table: i18n.t('myorder.table')
    },
    tabPageHeight:0
  }),
  created () {
    this.getOrderDetail()
    this.tabPageHeight = Utils.env.getPageHeight() - 300 + "px"
  },
  methods: {
    getOrderDetail () {
      if (this.orderId) {
        getOrderDetail(this.orderId, {
          system_type: localStorage.getItem('system_type'),
          timestamp: localStorage.getItem('timestamp'),
          key: localStorage.getItem('key'),
          token: localStorage.getItem('token'),
          lang_id:localStorage.getItem('language') ? localStorage.getItem('language') : 1
        }).then(res => {
          let foodList = res.data.foods
          foodList.forEach((value, key) => {
            let attrs = value.attrs ? value.attrs : []
            let attributeTitle = []
            attrs.forEach((attrValue) => {
              attrValue.models.forEach(modelValue => {
                attributeTitle.push(modelValue.model_name)
              })
            })
            attributeTitle = attributeTitle.join('、')
              this.$nextTick(function () {
                this.foodList.push({
                  title: value.food_name,
                  attributeTitle: attributeTitle,
                  number: value.num,
                  price: value.price
                })
            })
          })

          this.totalPrice = parseFloat(res.data.total).toFixed(2)
        }).catch(err => {
          console.log(err.message)
        }).finally(() => {})
      }
    }
  }
}
</script>
